<%--
  Created by IntelliJ IDEA.
  User: 45143
  Date: 2020-11-24
  Time: 21:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<base href="${pageContext.request.contextPath}/">
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        .fx {
            display: flex;
        }

        .fx-col {
            display: flex;
            flex-direction: column;
        }

        .fx-g1 {
            flex: 1;
        }

        .fx-m_center {
            justify-content: center;
        }

        .fx-c_center {
            align-items: center;
        }
        form label {
            margin-bottom: 20px;
        }
        form label span{
            display: inline-block;
            width: 75px;
        }
        form label  input,form label select {
            height: 35px;
            width: 230px;
            border-radius: 4px;
            border: 1px solid #b9b9b9;
            box-sizing: border-box;
            padding-left: 10px;
        }
        form button {
            width: 200px;
            padding: 10px 0;
            margin: 0 auto;
            background: #f7f7f7;
            border: 1px solid #b9b9b9;
            border-radius: 3px;
            cursor: pointer;
        }

        form button:hover {
            background: #b9b9b9;
        }


    </style>

</head>
<body>

<div class="fx-col fx-c_center" style="height: 100%;padding-top: 10vh;box-sizing:border-box ">

    <h1>欢迎使用学生成绩管理系统</h1>

    <form action="login/check" method="post"  class="fx-col" style="margin-top: 20px">

        <label>
            <span>用户名：</span>
            <input type="text" name="name">
        </label>
        <label>
            <span>密码：</span>
            <input type="password" name="pwd">
        </label>
        <label>
            <span>角色：</span>
            <select name="role">
                <option value="1">管理员</option>
                <option value="2">老师</option>
                <option value="3">学生</option>
            </select>
        </label>
        <label>
            <span>验证码：</span>
            <input type="text" name="code" >
            <img src="/login/code" style="width: 100px;vertical-align: bottom" id="codeimg">
        </label>


        <a href="register.jsp">去注册</a>
        <button type="button" id="sub_btn" >提交</button>


    </form>

</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    $(function () {
        $("#sub_btn").click(function() {
            let name = $("input[name='name']").val();
            let pwd = $("input[name='pwd']").val();
            let role = $("select[name='role']").val();
            let code = $("input[name='code']").val();
            sub(name, pwd, role, code);
        })

        $("#codeimg").click(function () {
            $(this).attr("src", "login/code?time="+new Date().getTime());
        })



    })



    function sub(name, pwd, role, code) {
        $.ajax({
            url: "/login/check",
            data: {name , pwd , role , code },
            type: "post",
            dataType: "json",
            success: (res) => {
                console.log(res);
                if (res.success) {
                    location.href = "admin/index";
                } else {
                    alert(res.msg);
                    $("#codeimg").click();
                }
            }
        })
    }

</script>
</html>
